<script setup lang="ts">
const { data, pending, error } = await useFetch<any>(
  `/api/users`,
  {
    key: 'user-list',
  }
);
</script>

<template>
  <div v-if="pending">Loading...</div>
  <div v-else-if="error">Error: {{ error.message }}</div>
  <div v-else>
    <ul>
      <li v-for="user in data" :key="user.id">
        <NuxtLink :to="`/users/${user.id}`">
          {{ user.name }} - {{ user.email }}
        </NuxtLink>
      </li>
    </ul>
  </div>
</template>

<style scoped></style>
